<template>
  <div class="container">
    <div class="title">个人中心</div>
    <div class="content">
      <div class="shouhuo">
        <el-tag style="margin: 30px 0;" size="medium">
          收货信息
        </el-tag>
        <el-form :label-position="labelPosition" label-width="80px" :model="formData">
          <el-form-item label="收货人">
            <el-input v-model="formData.receiveName" placeholder="请输入收获人"></el-input>
          </el-form-item>
          <el-form-item label="收货电话">
            <el-input v-model="formData.phone" placeholder="请输入电话"></el-input>
          </el-form-item>
          <el-form-item label="收货地址">
            <el-input v-model="formData.usedAddress" placeholder="请输入收货地址"></el-input>
          </el-form-item>
        </el-form>
        <center>
          <el-button type="primary" @click="userInfoHandle">提交</el-button>
        </center>
      </div>
      <div class="anquan">
        <el-tag style="margin: 30px 0;" size="medium">
          安全信息
        </el-tag>
        <el-form :label-position="labelPosition" label-width="80px" :model="secureInfo">
          <el-form-item label="原密码">
            <el-input v-model="secureInfo.oldPsd" placeholder="请输入原密码"></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="secureInfo.newPsd" placeholder="请输入新密码"></el-input>
          </el-form-item>
        </el-form>
        <center>
          <el-button type="primary" @click="UpdataPsd">提交</el-button>
        </center>
      </div>
    </div>
  </div>
</template>

<script>
import { updataPsd ,addUserInfo,getUserInfo} from '@/api';
import { UpdataPsd } from '@/store/user/index';
export default {
  name: '',
  data() {
    return {
      pageSize:100,
      pageNum:1,
      labelPosition: 'right',
      formData: {
        receiveName: '',
        phone: '',
        usedAddress: ''
      },
      secureInfo: {
        oldPsd: '',
        newPsd: ''
      }
    }
  },
  methods: {
    userInfoHandle() {
      addUserInfo(this.formData).then(res => {
        this.$message({
          type:'success',
          message:'您的信息已更新成功'
        })
      })
    },
    getUser(){
      getUserInfo(this.pageNum,this.pageSize).then(res => {
        this.formData.receiveName = res.data.records[0].receiveName
        this.formData.usedAddress = res.data.records[0].usedAddress
        this.formData.phone = res.data.records[0].phone
        console.log(res);
      })
    },
    UpdataPsd() {
      if(this.secureInfo.oldPsd != this.$store.state.user['password']) {
        this.$message({
          type:'warning',
          message:'原密码错误，请重新输入'
        })
      } else {
        let param = {
          password: this.secureInfo.newPsd
        }
        updataPsd(param).then(res => {
          
          this.$message({
            type:'success',
            message:'密码修改成功'
          })
      })
      }
     
    }
  },
  mounted() {
    this.getUser()
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

  .title {
    margin: 20px 0;
    font-size: 50px;
    color: #409eff;
  }

  .content {
    width: 50%;
    margin-bottom: 50px;
  }
}
</style>